<template>
	<view class="layer">
		<IndexHead :config="navConfig"/>
		
	<!-- 持卡人信息 -->
		<view class="chiKa">
			<view>
				<view class="SG">┃</view><i>持卡人信息</i>
				<view class="ckText">请绑定持卡人本人的银行卡信息</view>
			</view>
		</view>
	<!-- 持卡人表单 -->
		<view class="table1">
				<view class="label">姓名</view>
				<input class="one" confirmtype="text" placeholder="请输入持卡人姓名"/><br>
				<hr>
				<view class="label">身份证号</view>
				<input class="two" confirmtype="text" placeholder="请输入持卡人身份证"/>
		</view>
		
		<!-- 银行卡信息 -->
			<view class="yhKa">
				<view>
					<view class="SG">┃</view><i>银行卡信息</i>
				</view>
			</view>
		<!-- 银行卡表单 -->
			<view class="table2">
				<form action="">
					<label class="label1" for="">所属银行</label>
					<input class="one" confirmtype="text" placeholder="请输入银行名称"/><br>
					<hr>
					<label class="label1" for="">银行卡号</label>
					<view><input class="two" confirmtype="text" placeholder="请输入银行卡卡号"/><view class="xiangji"><navigator url=""><image src="../../../static/myPic/xiangJi.png" mode=""></image></navigator></view></view><br>
					<hr>
					<label class="label2" for="">银行预留手机号</label>
					<input class="three" confirmtype="text" placeholder="请输入银行预留手机号"/><br>
				</form>
			</view>
			<!-- 确认提交 -->
			<view>
				<view class="btn" type="button" @click="togglePopup('center', 'tip')"><i>确认提交</i></view>
				<uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
				<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
					<view class="uni-tip">
						<view class="uni-tip-title">绑定成功</view>
						<image class="uni-tip-content" src="../../../static/myPic/chenggong.png"></image>
						<navigator url="clickOne" class="uni-tip-group-button">
							<view class="uni-tip-button" @click="cancel('tip')">返 回</view>
						</navigator>
					</view>
				</uni-popup>
			</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components: {
			uniPopup
		},
			data(){
				return{
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:false,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'绑定银行卡',
							hasSearchMid:false
						},
						right:{
							
						}
					},
					show: false,
					curTabIndex: 0,
				}
			},
			methods: {
				togglePopup(type, open) {
					
					this.type = type
					if (open === 'tip') {
						this.show = true
					} else {
						this.$refs[open].open()
					}
				},
				cancel(type) {
					if (type === 'tip') {
						this.show = false
						return
					}
					this.$refs[type].close()
				},
				change(e) {
					console.log(e.show)
				}
			}
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #fff;
	}
		
/* 持卡人信息 */
	.chiKa{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.chiKa .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.chiKa i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.ckText{
		margin-left: 55upx;
		margin-top: 24upx;
		width: 350upx;
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #CFCFCF;
		line-height: 36upx;
	}
	
	/* 持卡人表单 */
	.table1{
		width: 690upx;
		height: 189upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 107upx;
	}
	.table1 .label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 34upx;
		float: left;
	}
	.table1 .one{  
		margin-left: 90upx;
		margin-top: 24upx;
		width: 266upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.table1 hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 40upx;
	}
	.table1 .two{
		margin-left: 90upx;
		margin-top: 24upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	
	/* 银行卡信息 */
		.yhKa{
			width: 540upx;
			margin-top: 20upx;
			margin-left: 6upx;
			height:27upx;
		}
		.yhKa .SG{
			color: #54B0FF;
			width: 5upx;
			height: 23upx;
			margin-left: 12upx;
			font-size: 23upx;
			float: left;
		}
		.yhKa i{
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #010101;
			margin-left: 52upx;
		}
		
		/* 银行卡表单 */
		.table2{
			width: 690upx;
			height: 297upx;
			box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
			margin-left: 30upx;
			margin-top: 50upx;
		}
		.table2 .label1{
			width: 120upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 34upx;
			float: left;
		}
		.table2 .label2{
			width: 200upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 34upx;
			float: left;
		}
		.table2 .one{  
			margin-left: 90upx;
			margin-top: 24upx;
			width: 266upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		}
		.table2 hr{
			border: none;
			margin-left: 42upx;
			width: 644upx;
			height: 0.1upx;
			color: #F6F6F6;
			margin-top: 40upx;
		}
		.table2 .two{
			margin-left: 90upx;
			margin-top: 24upx;
			width: 290upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		}
		.table2 .xiangji image{
			float: left;
			margin-top: 35upx;
			margin-left: 30upx;
			width: 39upx;
			height: 32upx;
		}
		.table2 .three{
			margin-left: 90upx;
			margin-top: 24upx;
			width: 280upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		}
		/* 确认提交 */
		.btn{
			width: 388upx;
			height: 72upx;
			margin-left: 181upx;
			margin-top: 94upx;
			margin-bottom: 34upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
		}
		.btn i{
			width: 120upx;
			height: 26upx;
			padding: 17upx 0 0 139upx;
			font-size: 28upx;
			color: #fff;
		}
		
		.uni-tip {
			width: 455upx;
			height: 304upx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 10upx;
		}
		
		.uni-tip-title {
			padding: 41upx 0 0 0;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC Regular;
			color: rgba(51,51,51,1);
		}
		
		.uni-tip-content {
			margin-left: 188upx;
			margin-top: 28upx;
			width: 71upx;
			height: 71upx;
		}
		
		.uni-tip-group-button {
			display: flex;
			width: 209upx;
			height: 58upx;
			margin-left: 123upx;
			margin-top: 35upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
			
		}
		
		.uni-tip-button {
			width: 100%;
			font-size: 14upx;
			padding: 13upx 0 0 75upx;
			font-size: 14upx;
			color: #fff;
		}
</style>
